<div class="row">
  <div class="col-lg-6">
    <h5 class="text-black"><strong>Default badges</strong></h5>
    <div class="mb-5">
      <span><hi-badge cssClass="badge-light" text="light"></hi-badge></span>
      <span><hi-badge cssClass="badge-primary" text="primary"></hi-badge></span>
      <span><hi-badge cssClass="badge-secondary" text="secondary"></hi-badge></span>
      <span><hi-badge cssClass="badge-success" text="success"></hi-badge></span>
      <span><hi-badge cssClass="badge-info" text="info"></hi-badge></span>
      <span><hi-badge cssClass="badge-warning" text="warning"></hi-badge></span>
      <span><hi-badge cssClass="badge-danger" text="danger"></hi-badge></span>
      <span><hi-badge cssClass="badge-dark" text="dark"></hi-badge></span>
    </div>
    <h5 class="text-black"><strong>Pill badges</strong></h5>
    <div class="mb-5">
      <hi-badge cssClass="badge-pill badge-light" text="light"></hi-badge>
      <hi-badge cssClass="badge-pill badge-primary" text="primary"></hi-badge>
      <hi-badge cssClass="badge-pill badge-secondary" text="secondary"></hi-badge>
      <hi-badge cssClass="badge-pill badge-success" text="success"></hi-badge>
      <hi-badge cssClass="badge-pill badge-info" text="info"></hi-badge>
      <hi-badge cssClass="badge-pill badge-warning" text="warning"></hi-badge>
      <hi-badge cssClass="badge-pill badge-danger" text="danger"></hi-badge>
      <hi-badge cssClass="badge-pill badge-dark" text="dark"></hi-badge>
    </div>
    <h5 class="text-black"><strong>Badges in buttons</strong></h5>
    <div class="mb-5">
      <button class="btn btn-primary" type="button">button
        <hi-badge cssClass="badge-success" text="success"></hi-badge>
      </button>
      <button class="btn btn-primary" type="button">button
        <hi-badge cssClass="badge-pill badge-dark" text="dark"></hi-badge>
      </button>
    </div>
  </div>
  <div class="col-lg-6">
    <h5 class="text-black"><strong>Sizing</strong></h5>
    <p class="text-muted">Modifier: font-size inherited from parent</p>
    <div class="mb-5">
      <h1>H1. <i class="icmn-home mr-3" aria-hidden="true"></i><span class="badge badge-success">success</span></h1>
      <h2>H2. <i class="icmn-home mr-3" aria-hidden="true"></i><span class="badge badge-success">success</span></h2>
      <h3>H3. <i class="icmn-home mr-3" aria-hidden="true"></i><span class="badge badge-success">success</span></h3>
      <h4>H4. <i class="icmn-home mr-3" aria-hidden="true"></i><span class="badge badge-success">success</span></h4>
      <h5>H5. <i class="icmn-home mr-3" aria-hidden="true"></i><span class="badge badge-success">success</span></h5>
      <h6>H6. <i class="icmn-home mr-3" aria-hidden="true"></i><span class="badge badge-success">success</span></h6>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="margin-bottom-0">
      <h5 class="text-black">
        <strong>Color Utilities</strong>
      </h5>
      <br/>
      <div class="mb-5">
        <table class="table table-hover">
          <colgroup>
            <col class="col-xs-4">
            <col class="col-xs-8">
          </colgroup>
          <thead>
          <tr>
            <th class="text-nowrap">Class</th>
            <th>Description</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-nowrap"><code>.text-black</code></td>
            <td><span class="text-black">Set Black color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-primary</code></td>
            <td><span class="text-primary">Set Primary color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-secondary</code></td>
            <td><span class="text-secondary">Set Secondary color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-success</code></td>
            <td><span class="text-success">Set Success color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-info</code></td>
            <td><span class="text-info">Set Info color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-warning</code></td>
            <td><span class="text-warning">Set Warning color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-danger</code></td>
            <td><span class="text-danger">Set Danger color to element</span></td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.text-dark</code></td>
            <td><span class="text-dark">Set Danger color to element</span></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <!-- Example Font Size -->
    <div class="mb-5">
      <h5 class="text-black">
        <strong>Font Size</strong>
      </h5>
      <br/>
      <table class="table table-hover">
        <colgroup>
          <col class="col-xs-4">
          <col class="col-xs-8">
        </colgroup>
        <thead>
        <tr>
          <th class="text-nowrap">Class</th>
          <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="text-nowrap"><code>.font-size-*</code></td>
          <td>Available values: 0, 10, 12, 14, 16, 18, 20, 24, 26, 30, 40, 50, 60, 70 , 80</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-0</code></td>
          <td>font-size: 0px</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-10</code></td>
          <td>font-size: 10px</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-12</code></td>
          <td>font-size: 12px</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-14</code></td>
          <td>font-size: 14px</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-16</code></td>
          <td>font-size: 16px</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-18</code></td>
          <td>font-size: 18px</td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.font-size-20</code></td>
          <td>font-size: 20px</td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- End Example Font Size -->
  </div>

  <div class="col-lg-6">
    <!-- Example Font Weight -->
    <div class="mb-5">
      <h5 class="text-black">
        <strong>Font Weight & Style</strong>
      </h5>
      <br/>
      <div class="table-responsive">
        <table class="table table-hover">
          <colgroup>
            <col class="col-xs-4">
            <col class="col-xs-8">
          </colgroup>
          <thead>
          <tr>
            <th class="text-nowrap">Class</th>
            <th>Description</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-nowrap"><code>.font-weight-normal</code></td>
            <td class="font-weight-normal">Normal text</td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.font-weight-bold</code></td>
            <td class="font-weight-bold">Bold text</td>
          </tr>
          <tr>
            <td class="text-nowrap"><code>.font-italic</code></td>
            <td class="font-italic">Italic text</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- End Example Font Weight -->
  </div>

  <div class="col-lg-6">
    <!-- Example Text Transformation -->
    <div class="mb-5">
      <h5 class="text-black">
        <strong>Text Transformation</strong>
      </h5>
      <br/>
      <div class="table-responsive">
        <table class="table table-hover">
          <colgroup>
            <col class="col-xs-4">
            <col class="col-xs-8">
          </colgroup>
          <thead>
          <tr>
            <th class="text-nowrap">Class</th>
            <th>Description</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-nowrap">
              <code>.text-lowercase</code>
            </td>
            <td class="text-lowercase">Transform text to lowercase</td>
          </tr>
          <tr>
            <td class="text-nowrap" >
              <code>.text-uppercase</code>
            </td>
            <td class="text-uppercase">Transform text to uppercase</td>
          </tr>
          <tr>
            <td class="text-nowrap">
              <code>.text-capitalize</code>
            </td>
            <td class="text-capitalize">Transform text to capitalize</td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>
    <!-- End Example Text Transformation -->
  </div>
  <div class="col-lg-6">
    <!-- Example Text Wrapping -->
    <div class="mb-5">
      <h5 class="text-black">
        <strong>Text Wrapping</strong>
      </h5>
      <br/>
      <table class="table table-hover">
        <colgroup>
          <col class="col-xs-4">
          <col class="col-xs-8">
        </colgroup>
        <thead>
        <tr>
          <th class="text-nowrap">Class</th>
          <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="text-nowrap">
            <code>.text-truncate</code>
          </td>
          <td>
            <div class="col-md-4 text-truncate">
              This is text truncate.
            </div>
          </td>
        </tr>
        <tr>
          <td class="text-nowrap">
            <code>.text-break</code>
          </td>
          <td>
            <div class="col-md-4 text-break">
              This-is-text-break.
            </div>
          </td>
        </tr>
        <tr>
          <td class="text-nowrap">
            <code>.text-nowrap</code>
          </td>
          <td>
            <div class="col-md-4 text-nowrap" style="overflow: hidden;">
              This is text nowrap. This is text nowrap
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- End Example Text Wrapping -->
  </div>

  <div class="col-lg-6">
    <!-- Underlined Links -->
    <div class="mb-5">
      <h5 class="text-black">
        <strong>Underlined Links</strong>
      </h5>
      <br/>
      <table class="table table-hover">
        <colgroup>
          <col class="col-xs-4">
          <col class="col-xs-8">
        </colgroup>
        <thead>
        <tr>
          <th class="text-nowrap">Class</th>
          <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="text-nowrap"><code>.hi_core_link--underlined</code></td>
          <td><a href="javascript: void(0)" target="_blank" class="hi_core_link--underlined">Underlined Link</a></td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.hi_core_link--blue</code></td>
          <td><a href="javascript: void(0)" target="_blank" class="hi_core_link--blue">Blue Link</a></td>
        </tr>
        <tr>
          <td class="text-nowrap"><code>.hi_core_link--underlined .hi_core_link--blue</code></td>
          <td><a href="javascript: void(0)" target="_blank" class="hi_core_link--underlined hi_core_link--blue">Underlined
            and Blue Link</a></td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- End Underlined Links -->
  </div>
  <div class="col-lg-6">
    <!-- Example Text Alignment -->
    <div class="mb-5">
      <h5 class="text-black">
        <strong>Text Alignment</strong>
      </h5>
      <br/>
      <table class="table table-hover">
        <colgroup>
          <col class="col-xs-4">
          <col class="col-xs-8">
        </colgroup>
        <thead>
        <tr>
          <th class="text-nowrap">Class</th>
          <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="text-nowrap">
            <code>.text-left</code>
          </td>
          <td>Left aligned text</td>
        </tr>
        <tr>
          <td class="text-nowrap">
            <code>.text-center</code>
          </td>
          <td>Center aligned text</td>
        </tr>
        <tr>
          <td class="text-nowrap">
            <code>.text-right</code>
          </td>
          <td>Right aligned text</td>
        </tr>
        <tr>
          <td class="text-nowrap">
            <code>.text-justify</code>
          </td>
          <td>Justified text</td>
        </tr>
        </tbody>
      </table>
      <br/>
      <div class="cat__core__example">
        <p class="text-left">Left aligned text</p>
        <p class="text-center">Center aligned text</p>
        <p class="text-right">Right aligned text</p>
        <p class="text-justify">Justified text: Lorem Ipsum is simply dummy
          text of the printing and typesetting industry. Lorem Ipsum
          has been the industry's standard dummy text ever since the 1500s,
          when an unknown printer took a galley of type and scrambled
          it to make a type specimen book</p>
      </div>
    </div>
    <!-- End Example Text Alignment -->
  </div>

</div>
